<template>
  <div>
    <top></top>

    <div style="padding: 20px">
      <div class="Back">
        <a href="cart" class="BackLink">
          <i class="fa-solid fa-circle-left"></i>
          Return to Cart
        </a>
      </div>

      <div id="Catalog">
        <div id="Cart" style="padding-left: 200px">
          <h2><i class="fa-solid fa-list">Order</i></h2>

          <label id="shipToLabel"
            ><input type="checkbox" id="shipToCheckbox" value="0" />Ship to
            different address</label
          >

          <form action="updateCart" method="post">
            <div>
              <table class="tableCSS">
                <tr>
                  <td>
                    <b>Name: </b>
                  </td>
                  <td>
                    <input
                      type="text"
                      :value="account.firstName + ' ' + account.lastName"
                      width="250px"
                    />
                  </td>
                </tr>
                <tr>
                  <td>
                    <b>Address1: </b>
                  </td>
                  <td>
                    <input
                      type="text"
                      :value="
                        account.country +
                        ' ' +
                        account.state +
                        ' ' +
                        account.city +
                        ' ' +
                        account.address1
                      "
                      width="250px"
                    />
                  </td>
                </tr>
                <tr>
                  <td>
                    <b>Address2: </b>
                  </td>
                  <td>
                    <input
                      type="text"
                      :value="
                        account.country +
                        ' ' +
                        account.state +
                        ' ' +
                        account.city +
                        ' ' +
                        account.address2
                      "
                      width="250px"
                    />
                  </td>
                </tr>
                <tr>
                  <td>
                    <b>Email: </b>
                  </td>
                  <td>
                    <input type="text" :value="account.email" width="250px" />
                  </td>
                </tr>
                <tr>
                  <td>
                    <b>Phone Number: </b>
                  </td>
                  <td>
                    <input type="text" :value="account.phone" width="250px" />
                  </td>
                </tr>
              </table>
            </div>

            <div id="orderInfo" style="padding-top: 30px"></div>

            <p
              style="
                width: 200px;
                height: 40px;
                text-align: center;
                vertical-align: center;
                font-size: 20px;
              "
            >
              <b>Product List:</b>
            </p>

            <table class="product-top-table">
              <tr>
                <!-- <th class="cell-img">Images</th> -->
                <!-- <th class="cell-desp">Description</th> -->
                <th class="cell-itemid">ItemID</th>
                <th class="cell-quantity">Quantity</th>
                <th class="cell-listprice">List Price</th>
                <!-- <th class="cell-totalprice">Total Cost</th> -->
              </tr>
            </table>

            <table class="product-table" id="product-table">
              <div v-for="cartItem in cartList">
                <tr>
                  <!-- <td class="cell-img">
                    <div class="checkbox">
                      <a href="itemForm?itemId=${cartItem.item.itemId}">
                        ${cartItem.item.product.description.substring(0,cartItem.item.product.description.indexOf(">"))}
                        class="product-img">
                      </a>
                    </div>
                  </td>
                  <td class="cell-desp">
                    ${cartItem.item.attribute1} ${cartItem.item.attribute2}
                    ${cartItem.item.attribute3} ${cartItem.item.attribute4}
                    ${cartItem.item.attribute5} ${cartItem.item.product.name}
                  </td> -->
                  <td class="cell-quantity">
                    <span>
                      <div>ItemID: {{ cartItem.itemId }}</div>
                    </span>
                  </td>
                  <td class="cell-quantity">
                    <span>
                      <div>Quantity: {{ cartItem.quantity }}</div>
                    </span>
                  </td>
                  <td class="cell-listprice">
                    {{ cartItem.item.listPrice }}
                  </td>
                  <!-- <td :id="cartItem.itemId" class="cell-totalprice">
                    {{ subtotal }}
                  </td> -->
                </tr>
              </div>
            </table>

            <div style="margin: 10px; padding: 30px">
              <div style="display: flex">
                <table>
                  <tr>
                    <td>
                      <div
                        style="
                          padding-right: 10px;
                          font-size: 20px;
                          margin: 10px;
                          text-align: center;
                          width: 250px;
                        "
                      >
                        Sub Total:
                        {{ subtotal }}
                      </div>
                    </td>
                    <td>
                      <!-- <div><input type="submit" value="Update Order" /></div> -->
                    </td>
                  </tr>
                </table>
              </div>
              <div v-if="cartList != null && cartList.length > 0">
                <div
                  style="
                    background-color: #f1a449;
                    margin: 10px;
                    border-radius: 10px;
                    width: 200px;
                    text-align: center;
                  "
                >
                  <a style="cursor: pointer" class="Button" @click="payOrder()"
                    ><i class="fa-solid fa-sack-dollar"></i>Pay for your
                    Order</a
                  >
                </div>
              </div>
            </div>
          </form>
        </div>

        <div id="Separator">&nbsp;</div>
      </div>
    </div>

    <bottom></bottom>
  </div>
</template>

<script>
import Bottom from "./common/Bottom.vue";
import Top from "./common/Top.vue";
import { mapState } from "vuex";
import { refreshCarts } from "..//utils//cart";
export default {
  components: {
    Bottom,
    Top,
  },
  async mounted() {
    await refreshCarts();
  },
  methods: {
    goRouterPath(path) {
      this.$router.push({ path: path });
    },
    payOrder() {
      // 生成订单
      // 订单名称
      let subject = "pay";
      // 付款金额
      let totalAmount = this.subtotal;
      // 订单编号
      let traceNo;

      this.$http
        .post(`/orders/buy`, {
          account: this.account,
          cartList: this.cartList,
          subTotal: this.subtotal,
        })
        .then((res) => {
          console.log(res);
          let { status, data } = res.data;
          if (status == 0) {
            traceNo = data.orderId;
            window.location.href = `http://localhost:8080/alipay/pay?subject=${subject}&traceNo=${traceNo}&totalAmount=${totalAmount}`;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  computed: {
    ...mapState({
      account: (state) => JSON.parse(state.account),
      cartList: (state) => JSON.parse(state.cartList),
    }),
    subtotal() {
      if (this.cartList == null || this.cartList.length == 0) return 0;
      let sum = 0;
      for (let i = 0; i < this.cartList.length; i++) {
        const element = this.cartList[i];
        sum += parseFloat(element.item.listPrice);
      }
      return sum;
    },
  },
};
</script>

<style scoped>
@import url(../assets/css/cart.css);
</style>
